import React,{ useState } from "react";

//	该插件随机生成字符串，在该案例中随机生成数组的id，保证map渲染到列表时key值不同
import { nanoid } from "nanoid"

function Add() {

    // 创建一个ref
    let MY_INP = React.createRef()

    // 定义初始列表
    let [list,setList] = useState([])

    // 添加到列表
    let addinp = ()=>{
        console.log(MY_INP.current.value);

        // 生成数组项
        let listitem = {
            id: nanoid(),
            val: MY_INP.current.value
        }

        // 利用扩展运算符，将生成的数组项添加到数组后面
        setList([...list,listitem])
    }

    // 添加删除功能
    let del = (listid)=>{

        // 点击删除时传入该数组项的id值

        // 使用filter方法过滤掉这id的数组项，将新数组保存在一个变量中
        let updatelist = list.filter(item => item.id !== listid)

        // 将过滤后的数组更新到list中
        setList(updatelist)
    }
    
    return ( 
        <div>
            <input ref={MY_INP}></input>
            <button onClick={
                addinp
            }>添加</button>
            {/* 渲染列表 */}
            <ul className="ul">
                {
                    list.map(item => <li key={item.id}> {item.val} <button onClick={()=>{del(item.id)}}>删除</button></li>)
                }
            </ul>
        </div>
    );
}

export default Add;